<!--
 * @Author: daidai
 * @Date: 2022-03-01 14:13:04
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-27 15:04:49
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-top.vue
-->
<template>
  <div class="right-jine" v-if="pageflag">
    <div class="jine-box">
      <div class="img">
        <i class="iconfont icon-shouru"></i>
      </div>
      <div class="info">
        <span class="label">订单总额</span>
        <span class="number">
          <AnimatedNumber :value="order_stat.all_money" :round="2" :format="formatToPrice" />元
        </span>
      </div>
    </div>
    <div class="jine-box">
      <div class="img">
        <i class="iconfont icon-zidingdanzongshu"></i>
      </div>
      <div class="info">
        <span class="label">订单总数</span>
        <span class="number">
          <!-- {{ order_stat.all_num }} -->
          <AnimatedNumber :value="order_stat.all_num" :round="1" :format="formatToPrice" />
          <!-- <dv-digital-flop :config="all_numconfig" style="width:160px;height:20px;" /> -->
        </span>
      </div>
    </div>
    <div class="jine-box">
        <div class="img">
           <i class="iconfont icon-zongjine"></i>
        </div>
        <div class="info">
          <span class="label">当天订单总额</span>
          <span class="number">
            <AnimatedNumber :value="order_stat.day_money" :round="2" :format="formatToPrice" />元
            <!-- <dv-digital-flop :config="day_moneyconfig" style="width:160px;height:20px;" /> -->
          </span>
        </div>
      </div>
      <div class="jine-box">
        <div class="img">
          <i class="iconfont icon-zidingdanzongshu"></i>
        </div>
        <div class="info">
          <span class="label">当天订单总数</span>
          <span class="number">
             <AnimatedNumber :value="order_stat.day_num" :round="1" :format="formatToPrice" />
              <!-- <dv-digital-flop :config="day_numconfig" style="width:160px;height:20px;" /> -->
          </span>
        </div>
      </div>
      <!-- <div class="jine-box">
        <div class="img">
           <i class="iconfont icon-yajin1"></i>
        </div>
        <div class="info">
          <span class="label">今日套餐总额</span>
          <span class="number">743847.88</span>
        </div>
      </div>
      <div class="jine-box">
        <div class="img">
           <i class="iconfont icon-deposit"></i>
        </div>
        <div class="info">
          <span class="label">今日押金总额</span>
          <span class="number">93847.88</span>
        </div>
      </div> -->
  </div>
  <Reacquire v-else @onclick="getData" style="line-height: 200px">
    重新获取
  </Reacquire>
</template>

<script>
import * as API from "@/api";
import AnimatedNumber from "animated-number-vue";
let style = {
  fontSize: 22
}
export default {
  components: {
    AnimatedNumber
  },
  data() {
    return {
      pageflag: false,
      timer: null,
      order_stat: {
        all_money: 0,
        all_num: 0,
        day_money: 0,
        day_num: 0
      },
      count: 0,
      all_moneyconfig: {
        number: [0],
        content: '{nt} 元',
        toFixed: 2,
        style: {
          ...style,
          // stroke: "#00fdfa",
          fill: "#00fdfa",
        },
      },
      all_numconfig: {
        number: [0],
        content: '{nt}',
        style: {
          ...style,
          // stroke: "#00fdfa",
          fill: "#00fdfa",
        },
      },
      day_moneyconfig: {
        number: [0],
        content: '{nt} 元',
        toFixed: 2,
        style: {
          ...style,
          // stroke: "#00fdfa",
          fill: "#00fdfa",
        },
      },
      day_numconfig: {
        number: [0],
        content: '{nt}',
        style: {
          ...style,
          // stroke: "#00fdfa",
          fill: "#00fdfa",
        },
      },
    };
  },
  created() {

  },

  mounted() {
     this.getData();
     this.switper();
  },
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    getData() {
      this.pageflag = true;
      this.count+=200
      const URL = '/super/screen/order_stat';
      // const URL = '/admin/screen/order_stat';
      API.GET(URL).then(res => {
        if(res.code === 1){
          this.order_stat = {...res.data}
          // const { all_money, all_num, day_money, day_num } = res.data
          // this.all_moneyconfig = {
          //   ...this.all_moneyconfig,
          //   number: [all_money - 0]
          // }
          // this.all_numconfig = {
          //   ...this.all_numconfig,
          //   number: [all_num]
          // }

          // this.day_moneyconfig = {
          //   ...this.day_moneyconfig,
          //   number: [day_money]
          // }
          // this.day_numconfig = {
          //   ...this.day_numconfig,
          //   number: [day_num]
          // }
        } else {
          this.pageflag = false;

        }
      })
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = (a) => {
        this.getData();
      };
      this.timer = setInterval(
        looper,
        1 * 60 * 1000
      );
    },
    formatToPrice(value) {
      return `${value.toFixed(2)}`;
    }
  },
};
</script>
<style lang='scss' scoped>
.right_top_inner {
  margin-top: -8px;
}
.right-jine {
  display: flex;
  flex-wrap: wrap;
  .jine-box {
    width: 41%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    // flex-direction: column;
    padding: 34px 19px;
    margin-right: 15px;
    margin-bottom: 10px;
    background: linear-gradient(176deg, rgba(6, 7, 9, 0.1), rgba(45, 66, 141, 0.7));
    &:nth-child(even) {
      margin-right: 0;
    }
    >.img {
      >i {
        font-size: 34px;
        color: gold;
      }
    }
    .info {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      flex-direction: column;
      margin-left: 8px;

      .label {
        font-size: 22px;
        margin-bottom: 10px;
      }
      .number {
        font-size: 20px;
      }
    }
  }

}
</style>
